<template>
  <g class="char-blank" v-if="props.char === ' '" />
  <path
    class="char-0"
    v-else-if="props.char == '0'"
    :fill="props.fill"
    d="M3,0 h3  v1  h1  v1  h1  v3  h-1 v1  h-1 v-4 h-1 v-1 h-2 v-1 M6,7 h-3 v-1 h-1 v-1 h-1 v-3 h1  v-1 h1  v4  h1  v1  h2  v1"
  />
  <path class="char-1" v-else-if="props.char == '1'" :fill="props.fill" d="M4,0 h2 v6 h2 v1 h-6 v-1 h2 v-4 h-1 v-1 h1 v-1" />
  <path
    class="char-2"
    v-else-if="props.char == '2'"
    :fill="props.fill"
    d="M2,0 h5 v1 h1 v2 h-1 v1 h-1 v1 h-2 v1 h4 v1 h-7 v-2 h1 v-1 h1 v-1 h2 v-1 h1 v-1 h-3 v1 h-2 v-1 h1 v-1"
  />
  <path
    class="char-3"
    v-else-if="props.char == '3'"
    :fill="props.fill"
    d="M2,0 h6 v1 h-1 v1 h-1 v1 h1 v1 h1 v2 h-1 v1 h-5 v-1 h-1 v-1 h2 v1 h3 v-2 h-3 v-1 h1 v-1 h1 v-1 h-3 v-1"
  />
  <path
    class="char-4"
    v-else-if="props.char == '4'"
    :fill="props.fill"
    d="M4,0 h3 v4 h-2 v-2 h-1 v1 h-1 v1 h5 v1 h-1 v2 h-2 v-2 h-4 v-2 h1 v-1 h1 v-1 h1 v-1"
  />
  <path
    class="char-5"
    v-else-if="props.char == '5'"
    :fill="props.fill"
    d="M1,0 h6 v1 h-4 v1 h4 v1 h1 v3 h-1 v1 h-5 v-1 h-1 v-1 h2 v1 h3 v-3 h-5 v-3"
  />
  <path
    class="char-6"
    v-else-if="props.char == '6'"
    :fill="props.fill"
    d="M3,0 h3 v1 h-2 v1 h-1 v4 h3 v-2 h-3 v-1 h4 v1 h1 v2 h-1 v1 h-5 v-1 h-1 v-4 h1 v-1 h1 v-1"
  />
  <path
    class="char-7"
    v-else-if="props.char == '7'"
    :fill="props.fill"
    d="M1,0 h7 v2 h-1 v1 h-1 v1 h-1 v3 h-2 v-3 h1 v-1 h1 v-1 h1 v-1 h-3 v1 h-2 v-2"
  />
  <g
    class="char-8"
    v-else-if="props.char == '8'"
    :fill="props.fill"
  >
    <path d="M2,0 h4 v1 h-3 v1 h1 v1 h2 v1 h2 v2 h-1 v1 h-5 v-1 h4 v-1 h-2 v-1 h-2  v-1 h-1 v-2 h1 v-1" />
    <rect x="6" y="1" width="1" height="2" />
    <rect x="1" y="4" width="1" height="2" />
  </g>
  <path
    class="char-9"
    v-else-if="props.char == '9'"
    :fill="props.fill"
    d="M2,0 h5 v1 h1 v4 h-1 v1 h-1 v1 h-4 v-1 h3 v-1 h1 v-4 h-3 v2 h3 v1 h-4 v-1 h-1 v-2 h1 v-1"
  />
  <g class="char-a" v-else-if="props.char === 'a'" :fill="props.fill">
    <path d="M3,0 h3 v1 h1 v1 h1 v5 h-2 v-5 h-1 v-1 h-1 v1 h-1 v5 h-2 v-5 h1 v-1 h1 v-1" />
    <rect x="3" y="4" width="3" height="1" />
  </g>
  <g class="char-b" v-else-if="props.char === 'b'" :fill="props.fill">
    <rect x="1" y="0" width="2" height="7" />
    <rect x="3" y="0" width="4" height="1" />
    <rect x="3" y="3" width="4" height="1" />
    <rect x="3" y="6" width="4" height="1" />
    <rect x="6" y="1" width="2" height="2" />
    <rect x="6" y="4" width="2" height="2" />
  </g>
  <path
    class="char-c"
    v-else-if="props.char === 'c'"
    :fill="props.fill"
    d="M3,0 h4 v1 h1 v1 h-2 v-1 h-2 v1 h-1 v3 h1 v1 h2 v-1 h2 v1 h-1 v1 h-4 v-1 h-1 v-1 h-1 v-3 h1 v-1 h1 v-1"
  />
  <g class="char-d" v-else-if="props.char === 'd'" :fill="props.fill">
    <rect x="1" y="0" width="2" height="7" />
    <rect x="3" y="0" width="3" height="1" />
    <rect x="5" y="1" width="2" height="1" />
    <rect x="6" y="2" width="2" height="3" />
    <rect x="5" y="5" width="2" height="1" />
    <rect x="3" y="6" width="3" height="1" />
  </g>
  <g class="char-e" v-else-if="props.char === 'e'" :fill="props.fill">
    <rect x="2" y="0" width="2" height="7" />
    <rect x="4" y="0" width="4" height="1" />
    <rect x="4" y="3" width="3" height="1" />
    <rect x="4" y="6" width="4" height="1" />
  </g>
  <g class="char-f" v-else-if="props.char === 'f'" :fill="props.fill">
    <rect x="1" y="0" width="2" height="7" />
    <rect x="3" y="0" width="5" height="1" />
    <rect x="3" y="3" width="4" height="1" />
  </g>
  <path
    class="char-g"
    v-else-if="props.char === 'g'"
    :fill="props.fill"
    d="M3,0 h5 v1 h-4 v1 h-1 v3 h1 v1 h2 v-2 h-1 v-1 h3 v4 h-5 v-1 h-1 v-1 h-1 v-3 h1 v-1 h1 v-1"
  />
  <g class="char-h" v-else-if="props.char === 'h'" :fill="props.fill">
    <rect x="1" y="0" width="2" height="7" />
    <rect x="3" y="3" width="3" height="1" />
    <rect x="6" y="0" width="2" height="7" />
  </g>
  <g class="char-i" v-else-if="props.char === 'i'" :fill="props.fill">
    <rect x="2" y="0" width="6" height="1" />
    <rect x="4" y="1" width="2" height="5" />
    <rect x="2" y="6" width="6" height="1" />
  </g>
  <g class="char-j" v-else-if="props.char === 'j'" :fill="props.fill">
    <rect x="6" y="0" width="2" height="6" />
    <rect x="1" y="5" width="2" height="1" />
    <rect x="2" y="6" width="5" height="1" />
  </g>
  <path
    class="char-k"
    v-else-if="props.char === 'k'"
    :fill="props.fill"
    d="M1,0 h2 v3 h1 v-1 h1 v-1 h1 v-1 h2 v1 h-1 v1 h-1 v1 h-1 v1 h1 v1 h1 v1 h1 v1 h-3 v-1 h-1 v-1 h-1 v2 h-2 v-7"
  />
  <g class="char-l" v-else-if="props.char === 'l'" :fill="props.fill">
    <rect x="2" y="0" width="2" height="6" />
    <rect x="2" y="6" width="6" height="1" />
  </g>
  <path
    class="char-m"
    v-else-if="props.char === 'm'"
    :fill="props.fill"
    d="M1,0 h2 v1 h1 v1 h1 v-1 h1 v-1 h2 v7 h-2 v-3 h-1 v1 h-1 v-1 h-1 v3 h-2 v-7"
  />
  <g class="char-n" v-else-if="props.char === 'n'" :fill="props.fill">
    <rect x="1" y="0" width="2" height="7" />
    <rect x="6" y="0" width="2" height="7" />
    <rect x="3" y="1" width="1" height="2" />
    <rect x="4" y="2" width="1" height="2" />
    <rect x="5" y="3" width="1" height="2" />
  </g>
  <g class="char-o" v-else-if="props.char === 'o'" :fill="props.fill">
    <rect x="2" y="0" width="5" height="1" />
    <rect x="2" y="6" width="5" height="1" />
    <rect x="1" y="1" width="2" height="5" />
    <rect x="6" y="1" width="2" height="5" />
  </g>
  <g class="char-p" v-else-if="props.char === 'p'" :fill="props.fill">
    <rect x="1" y="0" width="2" height="7" />
    <rect x="3" y="0" width="4" height="1" />
    <rect x="3" y="4" width="4" height="1" />
    <rect x="6" y="1" width="2" height="3" />
  </g>
  <path
    class="char-q"
    v-else-if="props.char === 'q'"
    :fill="props.fill"
    d="M2,0 h5 v1 h1 v4 h-1 v1 h1 v1 h-1 v-1 h-2 v-1 h-1 v-1 h2 v-3 h-3 v5 h3 v1 h-4 v-1 h-1 v-5 h1 v-1"
  />
  <path
    class="char-r"
    v-else-if="props.char === 'r'"
    :fill="props.fill"
    d="M1,0 h6 v1 h1 v3 h-3 v-1 h1 v-2 h-3 v3 h3 v1 h1 v1 h1 v1 h-3 v-1 h-1 v-1 h-1 v2 h-2 v-7"
  />
  <path
    class="char-s"
    v-else-if="props.char === 's'"
    :fill="props.fill"
    d="M2,0 h4 v1 h1 v1 h-2 v-1 h-2 v2 h4 v1 h1 v2 h-1 v1 h-5 v-1 h-1 v-1 h2 v1 h3 v-2 h-4 v-1 h-1 v-2 h1 v-1"
  />
  <g class="char-t" v-else-if="props.char === 't'" :fill="props.fill">
    <rect x="2" y="0" width="6" height="1" />
    <rect x="4" y="1" width="2" height="6" />
  </g>
  <g class="char-u" v-else-if="props.char === 'u'" :fill="props.fill">
    <rect x="1" y="0" width="2" height="6" />
    <rect x="6" y="0" width="2" height="6" />
    <rect x="2" y="6" width="5" height="1" />
  </g>
  <path
    class="char-v"
    v-else-if="props.char === 'v'"
    :fill="props.fill"
    d="M1,0 h2 v3 h1 v1 h1 v-1 h1 v-3 h2 v4 h-1 v1 h-1 v1 h-1 v1 h-1 v-1 h-1 v-1 h-1 v-1 h-1 v-4"
  />
  <path
    class="char-w"
    v-else-if="props.char === 'w'"
    :fill="props.fill"
    d="M1,0 h2 v3 h1 v-1 h1 v1 h1 v-3 h2 v7 h-2 v-1 h-1 v-1 h-1 v1 h-1 v1 h-2 v-7"
  />
  <path
    class="char-x"
    v-else-if="props.char === 'x'"
    :fill="props.fill"
    d="M1,0 h2 v1 h1 v1 h1 v-1 h1 v-1 h2 v2 h-1 v1 h-1 v1 h1 v1 h1 v2 h-2 v-1 h-1 v-1 h-1 v1 h-1 v1 h-2 v-2 h1 v-1 h1 v-1 h-1 v-1 h-1 v-2"
  />
  <path
    class="char-y"
    v-else-if="props.char === 'y'"
    :fill="props.fill"
    d="M2,0 h2 v3 h2 v-3 h2 v3 h-1 v1 h-1 v3 h-2 v-3 h-1 v-1 h-1 v-3"
  />
  <path
    class="char-z"
    v-else-if="props.char === 'z'"
    :fill="props.fill"
    d="M1,0 h7 v2 h-1 v1 h-1 v1 h-1 v1 h-1 v1 h4 v1 h-7 v-2 h1 v-1 h1 v-1 h1 v-1 h1 v-1 h-4 v-1"
  />
  <rect class="char-dash" v-else-if="props.char === '-'" :fill="props.fill" x="1" y="3" width="6" height="2" />
  <g class="char-plus" v-else-if="props.char === '+'" :fill="props.fill">
    <rect x="1" y="3" width="6" height="2" />
    <rect x="3" y="1" width="2" height="6" />
  </g>
  <g class="char-colon" v-else-if="props.char === ':'" :fill="props.fill">
    <rect x="2" y="1" width="2" height="2" />
    <rect x="2" y="5" width="2" height="2" />
  </g>
  <rect class="char-dot" v-else-if="props.char === '.'" x="2" y="5" width="2" height="2" :fill="props.fill" />
  <g class="char-question-mark" v-else-if="props.char === '?'" :fill="props.fill">
    <path d="M2,0 h5 v1 h1 v2 h-1 v1 h-1 v1 h-3 v-1 h2 v-1 h1 v-2 h-3 v2 h-2 v-2 h1 v-1" />
    <rect x="3" y="6" width="3" height="1" />
  </g>
  <g class="char-how-mark" v-else-if="props.char === '!'" :fill="props.fill">
    <path d="M4,0.3 C3.5,0.3 3.2,0.7 3.1,1.3 C3,1.7 3,2.8 3.1,3.2 C3.2,3.8 3.5,4.2 4,4.2 C4.5,4.2 4.8,3.8 4.9,3.2 C5,2.8 5,1.7 4.9,1.3 C4.8,0.7 4.5,0.3 4,0.3 Z" />
    <ellipse cx="4" cy="6.5" rx="0.8" ry="0.6"/>
  </g>
  <path
    class="char-roman-numeral-one"
    v-else-if="props.char === '\u2160'.toLowerCase()"
    :fill="props.fill"
    d="M2,0 h4 v1 h-1 v5 h1 v1 h-4 v-1 h1 v-5 h-1 v-1"
  />
  <g 
    class="char-roman-numeral-two"
    v-else-if="props.char === '\u2161'.toLowerCase()"
    :fill="props.fill"
  >
    <rect x="2" y="0" width="5" height="1" />
    <rect x="3" y="1" width="1" height="5" />
    <rect x="5" y="1" width="1" height="5" />
    <rect x="2" y="6" width="5" height="1" />
  </g>
  <path
    class="char-leftwards-arrow"
    v-else-if="props.char === '\u2190'.toLowerCase()"
    :fill="props.fill"
    d="M1,3 h1 v-1 h1 v-1 h1 v-1 h1 v2 h3 v3 h-3 v2 h-1 v-1 h-1 v-1 h-1 v-1 h-1 v-1"
  />
  <path
    class="char-upwards-arrow"
    v-else-if="props.char === '\u2191'.toLowerCase()"
    transform="translate(8,-1) rotate(90)"
    :fill="props.fill"
    d="M1,3 h1 v-1 h1 v-1 h1 v-1 h1 v2 h3 v3 h-3 v2 h-1 v-1 h-1 v-1 h-1 v-1 h-1 v-1"
  />
  <path
    class="char-rightwards-arrow"
    v-else-if="props.char === '\u2192'.toLowerCase()"
    :fill="props.fill"
    d="M1,2 h3 v-2 h1 v1 h1 v1 h1 v1 h1 v1 h-1 v1 h-1 v1 h-1 v1 h-1 v-2 h-3 v-3"
  />
  <path
    class="char-downwards-arrow"
    v-else-if="props.char === '\u2193'.toLowerCase()"
    transform="translate(8,-1) rotate(90)"
    :fill="props.fill"
    d="M1,2 h3 v-2 h1 v1 h1 v1 h1 v1 h1 v1 h-1 v1 h-1 v1 h-1 v1 h-1 v-2 h-3 v-3"
  />
  <g
    class="char-copyright-sign"
    v-else-if="props.char === '\u00a9'.toLocaleLowerCase()"
    :fill="props.fill"
  >
    <rect x="2" y="0" width="4" height="1" />
    <rect x="2" y="7" width="4" height="1" />
    <rect x="0" y="2" width="1" height="4" />
    <rect x="7" y="2" width="1" height="4" />
    <rect x="1" y="1" width="1" height="1" />
    <rect x="6" y="1" width="1" height="1" />
    <rect x="1" y="6" width="1" height="1" />
    <rect x="6" y="6" width="1" height="1" />
    <path d="M3,2 h3 v1 h-3 v2 h3 v1 h-3 v-1 h-1 v-2 h1 v-1" />
  </g>
</template>

<script setup>
  const props = defineProps(['char', 'fill'])
</script>

<style lang="scss" scoped>
  
</style>